import { Button, Input, DatePicker, Divider, Upload, message, Tooltip, Spin } from 'antd'
import { useBoolean, useRequest } from 'ahooks'
import { useRef, useState, useEffect } from 'react'
import { LoadingOutlined, PlusOutlined, LinkOutlined, DeleteOutlined } from '@ant-design/icons'
import { API_LIST } from '../../Api/Api'
import { Http } from '../../Api'

const beforeUpload = file => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
    if (!isJpgOrPng) message.error('请双穿 jpg/png 图片!')
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) message.error('图片大小不得超过2M!')
    return isJpgOrPng && isLt2M
}

export const Link = ({ data }) => {
    const [loading, setLoading] = useState(false)
    const uploadButton = <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} </div>
    const [State, { setTrue, setFalse }] = useBoolean(false)
    const [coverAttachmentUuid, setCoverAttachmentUuid] = useState()
    const [imageUrl, setImageUrl] = useState()
    const [currencyA, setCurrencyA] = useState()

    const handleChange = info => {
        if (info.file.status === 'uploading') {
            setLoading(true)
            return
        }
        if (info.file.status === 'done') {
            const { fileUrl, uuid } = info.file.response
            message.success('封面上传成功!')
            setImageUrl(fileUrl)
            setCoverAttachmentUuid(uuid)
        }
    }
    const SubmitData = () => {
        setTrue()
        putInfoManage({ url: 'putInfoManage', data: { ...data, coverAttachmentUuid, currencyA }, path: [data.uuid] })
            .then(res => {
                console.log(res)
                message.success('添加链接成功!')
                setFalse()
            })
            .catch(() => {
                message.error('添加链接失败!')
                setFalse()
            })
    }
    const { runAsync: putInfoManage } = useRequest(Http, { manual: true })
    const { runAsync: getInfoManageDetail } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const [{ coverAttachmentUuid, coverUrl, currencyA }] = res
            setCoverAttachmentUuid(coverAttachmentUuid)
            setImageUrl(coverUrl)
            setCurrencyA(currencyA)
        },
    })

    useEffect(() => {
        if (data) getInfoManageDetail({ url: 'getInfoManageGetOneInfoManage', data: { uuid: data.uuid } })
    }, [getInfoManageDetail, data])

    return (
        <Spin spinning={State}>
            <div className="ThrPageLinkBox">
                <Divider>封面</Divider>
                <div className="upload">
                    <Upload
                        name="file"
                        action={API_LIST()['posAttachment']}
                        data={{ fileType: 1 }}
                        headers={{ Authorization: `${sessionStorage.getItem('TOKEN')}` }}
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                </div>
                <Divider>外网链接</Divider>
                <Input
                    placeholder="请输入外网链接地址"
                    value={currencyA}
                    onChange={e => setCurrencyA(e.target.value)}
                />
                <div style={{ padding: 16 }}>
                    <Button type="primary" loading={!coverAttachmentUuid} onClick={SubmitData}>
                        保存
                    </Button>
                </div>
            </div>
        </Spin>
    )
}
